<template>
  <a-card title="添加图书" style="width: 70%; margin:20px auto; ">
    <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState"
      v-bind="layout"
      @finish="handleFinish"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback label="名称" name="name" :rules="[{ required: true }]">
        <a-input v-model:value="formState.name"/>
      </a-form-item>
      <a-form-item
        name="category"
        label="类别"
        has-feedback
        :rules="[{ required: true }]"
      >
        <a-select v-model:value="formState.category" placeholder="请选择类别">
          <a-select-option value="PHP">PHP</a-select-option>
          <a-select-option value="Java">Java</a-select-option>
          <a-select-option value="Python">Python</a-select-option>
          <a-select-option value="C++">C++</a-select-option>
          <a-select-option value="其他">其他</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item has-feedback label="价格" name="price" :rules="[{ required: true }]">
        <a-input-number :min="0"
                        :max="2"
                        :step="0.01" string-mode  v-model:value="formState.price"/>

      </a-form-item>

      <a-form-item name="publish_time" label="出版日期" :rules="[{ required: true }]">
        <a-date-picker style="width: 100%;" v-model:value="formState.publish_time"
                       value-format="YYYY-MM-DD"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import axios from "axios";
import {message} from "ant-design-vue";

interface FormState {
  name: string;
  category: string;
  price: number | undefined;
  publish_time: string;
}

const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
  name: '',
  category: '',
  price: undefined,
  publish_time: ''
});

const layout = {
  labelCol: {span: 4},
  wrapperCol: {span: 14},
};
const handleFinish = (values: FormState) => {
  axios({
    method: 'post',
    url: 'https://139.159.233.82/api/book/add',
    data: {
      name: values.name,
      category: values.category,
      price: values.price,
      publish_time: values.publish_time,
    },
    headers: {'Content-Type': 'application/json'},
    timeout: 2000, // 设置超时时间（单位：毫秒）
  })
    .then(response => {
      if (response.data.code === 20000) {
        console.log(response);
        message.success('添加成功!');
        resetForm();
      }
    })
    .catch(error => {
      console.error(error);
    });
  console.log(values, formState);
};
const handleFinishFailed = errors => {
  console.log(errors);
};
const resetForm = () => {
  formRef.value.resetFields();
};


</script>

